import React, { useEffect } from "react";

import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
import { useTranslation } from "react-i18next";
import { POST_VERIFY_REGISTER_EMAIL, XHR_FULFILLED } from "./../../config/api";
import { useRequest } from "./../../hooks/useRequest";
import { useLocation } from "react-router-dom";
import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";

const VerifiedMessage = () => {
  const { t } = useTranslation();
  const { fetchData, state: requestState } = useRequest();
  const useQuery = () => new URLSearchParams(useLocation().search);
  const query = useQuery();

  useEffect(() => {
    const token: string | null = query.get("token");
    const finalData = { securityToken: token };
    fetchData(POST_VERIFY_REGISTER_EMAIL, finalData);
  }, []);

  const { status, error, isLoading } = requestState;

  return (
    <>
      {isLoading && <div>Loading ...!</div>}
      {status === XHR_FULFILLED && (
        <div className="verified-card-container ">
          <Card className="verified-card">
            <CheckCircleOutlineIcon className="font-weight-bold done-icon" />
            <div>
              <h1 className="text-center">{t("form:phone-verified")}</h1>
              <h6>{t("form:phone-verified-desc")}</h6>
            </div>
            <Button variant="contained" color="primary">
              {t("buttons:go-dashboard")}
            </Button>
          </Card>
        </div>
      )}
      {error && <div>Error</div>}
    </>
  );
};

export default VerifiedMessage;
